<table class="w-full text-sm text-left rtl:text-right text-slate-500 dark:text-slate-400">
    <thead class="text-xs uppercase bg-slate-200 dark:bg-slate-700 dark:text-slate-400">
        <tr>
            <th scope="col" class="px-6 py-3">Customer</th>
            <th scope="col" class="px-6 py-3">Configuration</th>
            {% if not current_customer %}
                <th scope="col" class="px-6 py-3">
                    <span class="sr-only">Select</span>
                </th>
            {% endif %}
        </tr>
    </thead>
    <tbody class="htmx-request-hidden">
        {% for customer in customers %}
            <tr class="bg-white border-b dark:bg-slate-800 dark:border-slate-700">
                <th scope="row"
                    class="px-6 py-4 font-medium text-slate-900 whitespace-nowrap dark:text-white">
                    {{ customer.name }}
                </th>
                <td class="px-6 py-4">
                    <button class="btn btn-sm"
                            onclick="{{ customer.id }}_configuration.showModal(); event.stopPropagation();">
                        View Configuration
                    </button>
                    <dialog id="{{ customer.id }}_configuration" class="modal">
                        <div class="modal-box">
                            <div class="flex items-center justify-between pb-4">
                                <h3 class="font-bold text-lg">{{ customer.name }} Configuration</h3>
                                <form method="dialog">
                                    <button class="btn btn-sm btn-circle btn-ghost">✕</button>
                                </form>
                            </div>
                            <div class="max-h-96 overflow-y-auto rounded-box">
                                <pre><code class="language-json">{{ customer.configuration_formatted }}</code></pre>
                            </div>
                        </div>
                        <form method="dialog" class="modal-backdrop">
                            <button>close</button>
                        </form>
                    </dialog>
                </td>
                {% if not current_customer %}
                    <td class="px-6 py-4 text-right">
                        <form>
                            <input type="hidden" name="chat_id" value="{{ current_chat.chat_id }}">
                            <button name="customer_id"
                                    value="{{ customer.id }}"
                                    hx-post="{% url 'select_customer' %}"
                                    hx-target="#app"
                                    class="btn btn-primary btn-sm">Select</button>
                        </form>
                    </td>
                {% endif %}
            </tr>
        {% endfor %}
    </tbody>
</table>
<div class="htmx-request-flex px-6 py-4 flex-col items-center text-center">
    <span class="loading loading-ring loading-sm"></span>
    <div class="text-slate-500">Search customers...</div>
</div>
{% if customers|length == 0 %}
    <div class="htmx-request-hidden px-6 py-4 flex flex-col items-center text-center">
        <div class="p-2 mb-3 bg-slate-200 rounded-full">
            <svg xmlns="http://www.w3.org/2000/svg"
                 fill="none"
                 viewBox="0 0 24 24"
                 stroke-width="1.5"
                 stroke="currentColor"
                 class="w-6 h-6 text-slate-400">
                <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
            </svg>
        </div>
        <div class="text-slate-700">No customers found</div>
        <p class="text-slate-500 text-sm">Type a customer name or ID to search for a customer</p>
    </div>
{% endif %}
